<template>
  <el-dialog
    class="main-model-box"
    :title="config.title"
    :visible.sync="visible"
  >
    <el-form>
      <template v-for="item in form">
        <el-form-item :key="item.id" :label="config.info[item.id] + ':'">
          <el-input
            v-if="edit"
            v-model="item.val"
            autocomplete="off"
          ></el-input>
          <div v-else>{{ item.val }}</div>
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="info" @click="visible = false">退 出</el-button>
      <el-button v-if="edit" @click="closeEdit()"> 取 消 编 辑 </el-button>
      <el-button v-if="!edit" @click="openEdit()">编 辑</el-button>
      <el-button type="primary" v-if="edit" @click="visible = false">
        保 存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ["config", "form"],
  data() {
    return {
      edit: false,
      visible: false,
      tempForm: [],
    };
  },
  methods: {
    openEdit() {
      this.edit = true;
      for (let i = 0; i < this.form.length; i++)
        this.tempForm[i] = { id: this.form[i].id, val: this.form[i].val };
    },
    closeEdit() {
      var th = this;
      setTimeout(function () {
        console.log(th.tempForm[1].val);
        for (let i = 0; i < th.form.length; i++) {
          th.form[i].id = th.tempForm[i].id;
          th.form[i].val = th.tempForm[i].val;
        }
        th.edit = false;
      }, 200);
    },
  },
  watch: {
    visible: function (vs) {
      if (vs === false) this.closeEdit();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>